﻿<html>
	<head>
		<title>ws测试</title>
		<title>金大师</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<link rel="stylesheet" href="index.css" type="text/css" />
	</head>
	<body>
	<div class="swiper-container slide2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="index_slide_panel">
                <div>
                    <div class="tit">黄金延期</div>
                    <div class="num num1">{{num1}}</div>
                    <div class="zdf_div"><span class="inpr3 chg1">--</span><span class="change1">--</span></div>
                </div>
                <div>
                    <span class="xian xianl"></span>
                    <div class="tit">白银延期</div>
                    <div class="num num2">{{num2}}</div>
                    <div class="zdf_div"><span class="inpr3 chg2">--</span><span class="change2">--</span></div>
                    <span class="xian xianr"></span>
                </div>
                <div>
                    <div class="tit">黄金现货/美元</div>
                    <div class="num num4">{{num4}}</div>
                    <div class="zdf_div"><span class="inpr3 chg4">--</span><span class="change4">--</span></div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="index_slide_panel">
                <div>
                    <span class="xian xianl"></span>
                    <div class="tit">白银现货/美元</div>
                    <div class="num num5">{{num5}}</div>
                    <div class="zdf_div"><span class="inpr3 chg5">--</span><span class="change5">--</span></div>
                    <span class="xian xianr"></span>
                </div>
                <div>
                    <div class="tit">迷你黄金延期</div>
                    <div class="num num3">{{num3}}</div>
                    <div class="zdf_div"><span class="inpr3 chg3">--</span><span class="change3">--</span></div>
                </div>
                <div>
                    <div class="tit">美元指数</div>
                    <div class="num num6">{{num6}}</div>
                    <div class="zdf_div"><span class="inpr3 chg6">--</span><span class="change6">--</span></div>
                </div>
              </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
	<script type="text/javascript">
		var jdsVm = new Vue({
			el:".slide2",
			data:{
				num1:"--",
				num2:"--",
				num3:"--",
				num4:"--",
				num5:"--",
				num6:"--"
			},
			mounted:function(){
				this.websocket1();
			},
			methods:{
				websocket1:function(){
					var items =[
						{"Market":"SSGE","Inst":"Au(T+D)","ServiceType":"DYNA","Period":"","SubType":"SUBON"},
						{"Market":"SSGE","Inst":"Ag(T+D)","ServiceType":"DYNA","Period":"","SubType":"SUBON"},
						{"Market":"SSGE","Inst":"mAu(T+D)","ServiceType":"DYNA","Period":"","SubType":"SUBON"},
						{"Market":"GOLD","Inst":"XAU","ServiceType":"DYNA","Period":"","SubType":"SUBON"},
						{"Market":"GOLD","Inst":"XAG","ServiceType":"DYNA","Period":"","SubType":"SUBON"},
						{"Market":"FOREX","Inst":"USD","ServiceType":"DYNA","Period":"","SubType":"SUBON"}
					];
					var ws = new WebSocket("ws://websocket-quote2.jince.com:9997/quote");
					ws.onopen=function(){
						  items.forEach(function(item){
							  var dataStr=JSON.stringify({
								  Market:item.Market,
								  Inst:item.Inst,
								  ServiceType:"DYNA",
								  Period:"",
								  SubType:"SUBON"
							  });
							  ws.send(dataStr);
						  })
					},
					ws.onmessage=function(e){
						  var data=JSON.parse(e.data);
						  function chge(chg,i){
							if (chg > 0) {
							  chg = "+" + chg;change = "+" + change;
							   $(".num"+i+",.chg"+i+",.change"+i).addClass("red");
							 }else if(chg < 0){
							   $(".num"+i+",.chg"+i+",.change"+i).addClass("green");
							 }
						  }
						  for (var i = 0; i < items.length; i++) {
							if(data.Inst==items[i].Inst){
							  var gold = (data.QuoteData.DynaData[0].LastPrice*1).toFixed(2)||"--";
							  $(".num"+(i+1)).text(gold);

							  if(i==0) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.nnum1!="--") {
									  chg = (gold - jdsVm.nnum1).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.nnum1) / jdsVm.nnum1) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,1);
							  }
							  else if(i==1) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.nnum2!="--") {
									  chg = (gold - jdsVm.nnum2).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.nnum2) / jdsVm.nnum2) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,2);
							  }
							  else if(i==2) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.nnum3!="--") {
									  chg = (gold - jdsVm.nnum3).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.nnum3) / jdsVm.nnum3) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,3);
							  }
							  else if(i==3) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.wnum1!="--") {
									  chg = (gold - jdsVm.wnum1).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.wnum1) / jdsVm.wnum1) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,4);
							  }
							  else if(i==4) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.wnum2!="--") {
									  chg = (gold - jdsVm.wnum2).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.wnum2) / jdsVm.wnum2) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,5);
							  }
							  else if(i==5) {
								  var chg="--";
								  var change="--";
								  if(jdsVm.wnum3!="--") {
									  chg = (gold - jdsVm.wnum3).toFixed(2); //涨跌额
									  change = (((gold - jdsVm.wnum3) / jdsVm.wnum3) * 100).toFixed(2) + "%"; //涨跌幅change
								  }
								  $(".chg"+(i+1)).text(chg);
								  $(".change"+(i+1)).text(change);
								  chge(chg,6);
							  }
							}
						  }
					};
				}
				}
		});
		</script>
	</body>
</html>